<template>
  <div class="dialog-manager">
    <!-- 添加好友弹窗 -->
    <el-dialog
      title="添加好友"
      :visible.sync="localPrecisionSearchView"
      width="30%"
      :before-close="clearName"
      @open="handleOpen"
      center
    >
      <div class="dialog-content-layout">
        <el-input
          placeholder="登入名/手机号/邮箱"
          v-model="name"
          size="small"
          clearable
          class="dialog-input-width"
        ></el-input>
        <PrecisionSearch :keyword="name" @precisionSearch="precisionSearch" />
      </div>
    </el-dialog>

    <!-- 创建群聊弹窗 -->
    <el-dialog
      title="创建群聊"
      width="500px"
      :visible.sync="localBuildGroupChat"
      :before-close="buildGroupChatClose"
      center
    >
      <BuildGroupChat
        ref="buildGroupChat"
        @cancelBuildGroupChat="cancelBuildGroupChat"
      ></BuildGroupChat>
    </el-dialog>

    <!-- 视频通话弹窗 -->
    <AudioPopUps
      v-if="localDialogVisibleVideo"
      :pop-width="700"
      :full-screen-icon="true"
      :btn-show="false"
      title="视频通话"
      @closePop="closeVideoDialog"
    >
      <div>
        <VideoCalls
          @clearVideoTimer="clearVideoTimer"
          @closeVideo="closeVideo"
          :friendItem="currentItem"
          ref="videoCalls"
        />
      </div>
    </AudioPopUps>

    <!-- 语音通话弹窗 -->
    <AudioPopUps
      v-if="localDialogVisibleVoice"
      :pop-width="700"
      :full-screen-icon="false"
      :btn-show="false"
      title="语音通话"
      @closePop="closeVoiceDialog"
    >
      <div>
        <VoiceCalls
          @clearVoiceTimer="clearVoiceTimer"
          @closeVoice="closeVoice"
          :friendItem="currentItem"
          ref="voiceCalls"
        />
      </div>
    </AudioPopUps>

    <!-- 朋友动态弹窗 -->
    <DynamicPopUps
      v-model="localDialogVisibleDynamic"
      width="500"
      :showConfimButton="false"
      :showCancelButton="false"
      cancelType="primary"
      title="动态"
    >
      <FriendDynamic
        v-if="localDialogVisibleDynamic"
        @closeDynamic="closeDynamic"
      ></FriendDynamic>
    </DynamicPopUps>

    <!-- 自己发布的动态弹窗 -->
    <DynamicPopUps
      v-model="localDialogVisibleownDynamics"
      width="500"
      :showConfimButton="false"
      :showCancelButton="false"
      cancelType="primary"
      title="我的动态"
    >
      <OwnDynamics
        v-if="localDialogVisibleownDynamics"
        @closeDynamic="closeDynamic"
      ></OwnDynamics>
    </DynamicPopUps>

    <!-- 发表动态弹窗 -->
    <PostNewsPopUps
      v-model="localPostNewsShow"
      v-if="localPostNewsShow"
      @openDynamic="openDynamic"
      width="400"
      :confimText="'发表'"
      :showConfimButton="true"
      :showCancelButton="true"
    ></PostNewsPopUps>

    <!-- 某个动态视图弹窗 -->
    <DynamicView
      v-model="localDynamicViewShow"
      v-if="localDynamicViewShow"
      @openDynamic="openDynamic"
      ref="dynamicView"
      width="750"
      :confimText="'返回'"
      :showConfimButton="true"
      :showCancelButton="true"
    ></DynamicView>

    <!-- 设置对话框 -->
    <SettingsDialog
      :visible.sync="localShowSettingsDialog"
    />
  </div>
</template>

<script>
import PrecisionSearch from "./PrecisionSearch";
import BuildGroupChat from "./BuildGroupChat";
import AudioPopUps from "../PopUps/AudioPopUps.vue";
import VideoCalls from "./VideoCalls";
import VoiceCalls from "./VoiceCalls";
import DynamicPopUps from "../PopUps/DynamicPopUps";
import FriendDynamic from "../../views/dynamic/FriendDynamic";
import OwnDynamics from "../../views/dynamic/OwnDynamics";
import PostNewsPopUps from "../../views/dynamic/PostNewsPopUps";
import DynamicView from "../../views/dynamic/DynamicView";
import SettingsDialog from "../Settings/SettingsDialog.vue";

export default {
  name: 'DialogManager',
  components: {
    PrecisionSearch,
    BuildGroupChat,
    AudioPopUps,
    VideoCalls,
    VoiceCalls,
    DynamicPopUps,
    FriendDynamic,
    OwnDynamics,
    PostNewsPopUps,
    DynamicView,
    SettingsDialog,
  },
  props: {
    precisionSearchView: {
      type: Boolean,
      default: false
    },
    buildGroupChat: {
      type: Boolean,
      default: false
    },
    dialogVisibleVideo: {
      type: Boolean,
      default: false
    },
    dialogVisibleVoice: {
      type: Boolean,
      default: false
    },
    dialogVisibleDynamic: {
      type: Boolean,
      default: false
    },
    dialogVisibleownDynamics: {
      type: Boolean,
      default: false
    },
    postNewsShow: {
      type: Boolean,
      default: false
    },
    dynamicViewShow: {
      type: Boolean,
      default: false
    },
    showSettingsDialog: {
      type: Boolean,
      default: false
    },
    currentItem: {
      type: Object,
      default: () => ({
        friendshipId: null,
        remark: null,
      })
    }
  },
  data() {
    return {
      name: null,
    };
  },
  computed: {
    localPrecisionSearchView: {
      get() { return this.precisionSearchView; },
      set(val) { this.$emit('update:precisionSearchView', val); }
    },
    localBuildGroupChat: {
      get() { return this.buildGroupChat; },
      set(val) { this.$emit('update:buildGroupChat', val); }
    },
    localDialogVisibleVideo: {
      get() { return this.dialogVisibleVideo; },
      set(val) { this.$emit('update:dialogVisibleVideo', val); }
    },
    localDialogVisibleVoice: {
      get() { return this.dialogVisibleVoice; },
      set(val) { this.$emit('update:dialogVisibleVoice', val); }
    },
    localDialogVisibleDynamic: {
      get() { return this.dialogVisibleDynamic; },
      set(val) { this.$emit('update:dialogVisibleDynamic', val); }
    },
    localDialogVisibleownDynamics: {
      get() { return this.dialogVisibleownDynamics; },
      set(val) { this.$emit('update:dialogVisibleownDynamics', val); }
    },
    localPostNewsShow: {
      get() { return this.postNewsShow; },
      set(val) { this.$emit('update:postNewsShow', val); }
    },
    localDynamicViewShow: {
      get() { return this.dynamicViewShow; },
      set(val) { this.$emit('update:dynamicViewShow', val); }
    },
    localShowSettingsDialog: {
      get() { return this.showSettingsDialog; },
      set(val) { this.$emit('update:showSettingsDialog', val); }
    }
  },
  methods: {
    handleOpen() {
      this.name = null;
      this.$emit('complete-search');
    },
    
    clearName(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.localPrecisionSearchView = false;
          this.name = null;
          done();
        })
        .catch((_) => {});
    },
    
    buildGroupChatClose(done) {
      this.$confirm("确认关闭创建群聊窗口吗？")
        .then((_) => {
          this.localBuildGroupChat = false;
          this.safeRefCall('buildGroupChat', 'initData');
          done();
        })
        .catch((_) => {});
    },
    
    cancelBuildGroupChat() {
      this.localBuildGroupChat = false;
    },
    
    precisionSearch(searchResult) {
      this.localPrecisionSearchView = false;
      this.$emit('precision-search', searchResult);
    },
    
    closeDynamic(event, friendFeedId) {
      this.localDialogVisibleDynamic = false;
      if (event === "postNewsShow") {
        this.$nextTick(() => {
          this.localPostNewsShow = true;
        });
      } else if (event === "ownDynamicsView") {
        this.$nextTick(() => {
          this.localDialogVisibleownDynamics = true;
        });
      } else if (event === "dynamicView") {
        this.localDynamicViewShow = true;
        this.$nextTick(() => {
          this.safeRefCall('dynamicView', 'dynamic', friendFeedId);
        });
      }
    },
    
    openDynamic() {
      this.localPostNewsShow = false;
      this.localDynamicViewShow = false;
      this.$nextTick(() => {
        this.localDialogVisibleDynamic = true;
      });
    },
    
    closeVideoDialog() {
      this.localDialogVisibleVideo = false;
    },
    
    closeVoiceDialog() {
      this.localDialogVisibleVoice = false;
    },
    
    clearVideoTimer() {
      this.$emit('clear-video-timer');
    },
    
    clearVoiceTimer() {
      this.$emit('clear-voice-timer');
    },
    
    closeVideo(message) {
      this.clearVideoTimer();
      this.localDialogVisibleVideo = false;
      this.$notify({
        title: "视频通话",
        type: "warning",
        message: message,
      });
    },
    
    closeVoice(message) {
      this.clearVoiceTimer();
      this.localDialogVisibleVoice = false;
      this.$notify({
        title: "语音通话",
        type: "warning",
        message: message,
      });
    },
    
    // 安全的ref调用方法
    safeRefCall(refName, methodName, ...args) {
      if (this.$refs[refName] && this.$refs[refName][methodName]) {
        return this.$refs[refName][methodName](...args);
      }
      console.warn(`Ref ${refName} or method ${methodName} not found`);
      return null;
    },
    
    // 对外暴露的方法
    callVideoCalls(method, ...args) {
      return this.safeRefCall('videoCalls', method, ...args);
    },
    
    callVoiceCalls(method, ...args) {
      return this.safeRefCall('voiceCalls', method, ...args);
    },
    
    callDynamicView(method, ...args) {
      return this.safeRefCall('dynamicView', method, ...args);
    }
  }
};
</script>

<style scoped>
.dialog-manager {
  /* 弹窗管理器容器 */
  position: relative;
}

.dialog-content-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dialog-input-width {
  width: 300px;
}
</style>
